<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>用户管理</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="/assets/css/ace-rtl.min.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="/assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="/assets/js/html5shiv.min.js"></script>
    <script src="/assets/js/respond.min.js"></script>
    <![endif]-->

    <!--[if !IE]> -->
    <script src="/assets/js/jquery-2.1.4.min.js"></script>

    <!-- <![endif]-->

    <!--[if IE]>
    <script src="/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script src="/assets/js/bootstrap.min.js"></script>

    <!-- page specific plugin scripts -->
    <script src="/assets/js/jquery.dataTables.min.js"></script>
    <script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
    <script src="/assets/js/dataTables.buttons.min.js"></script>
    <script src="/assets/js/buttons.flash.min.js"></script>
    <script src="/assets/js/buttons.html5.min.js"></script>
    <script src="/assets/js/buttons.print.min.js"></script>
    <script src="/assets/js/buttons.colVis.min.js"></script>
    <script src="/assets/js/dataTables.select.min.js"></script>

    <!-- ace scripts -->
    <script src="/assets/js/ace-elements.min.js"></script>
    <script src="/assets/js/ace.min.js"></script>

</head>

<body class="no-skin">

<div th:replace="header :: navbar"></div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>

    <div th:replace="left :: sidebar"></div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">旅游</a>
                    </li>
                    <li class="active">旅游公司管理</li>
                </ul><!-- /.breadcrumb -->

            </div>

            <div class="page-content">

                <div style="float: left; padding: 10px;">
                    <form class="form-inline" id="qf" action="/admin/seller/page" method="post">
                        <input type="hidden" name="pageNum" th:value="${page.pageNum}" id="pageNum">
                        <input type="hidden" name="pageSize" th:value="${page.pageSize}" id="pageSize">

                        <div class="form-group">
                            <label for="sname">商家名称</label>
                            <input type="text" name="sName" class="form-control" id="sName" th:value="${condition.sName}">
                        </div>

                        <div class="form-group">
                            <label for="address">商家地址</label>
                            <input type="text" name="address" class="form-control" id="address"
                                   th:value="${condition.address}">
                        </div>
                        <button type="submit" class="btn btn-sm btn-default">查询</button>
                        <button type="button" class="btn btn-sm btn-default"
                                onclick="location.href='/admin/seller/toAdd'">添加
                        </button>
                        <button type="button" class="btn btn-sm btn-info" id="delPro" onclick="delAll();">删除选中</button>

                    </form>
                </div>


                <table id="simple-table" class="row table  table-bordered table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkall"></th>
                        <th>编号</th>
                        <th>商家名称</th>
                        <th>商家电话</th>
                        <th>商家地址</th>
                        <th class="col-md-2">操作</th>
                    </tr>
                    </thead>
                    <tbody>
					<!-- TODO 回显数据 -->
                    <tr th:each="seller,u:${page.list}" th:object="${seller}" th:class="${u.odd}? 'info' ">
                        <td><input type="checkbox"  name="check" th:value="${seller.sid}"></td>
                        <td scope="row" th:text="${u.count}">1</td>
                        <td th:text="${seller.sName}">马蜂窝</td>
                        <td th:text="${seller.consPhone}">15180187269</td>
                        <td th:text="${seller.address}">北京大兴</td>
                        <td style="text-align: center">
                            <a th:href="|getInfo/${seller.sid}|"><img src="/icon/edit.png" height="15%" width="15%"  ></a>&nbsp;&nbsp;
                            <a th:href="|javascript:delOne(${seller.sid})|" ><img src="/icon/delete.png" height="15%" width="15%"></a>
                        </td>
                    </tr>
	
                    </tbody>
                </table>

                <div>
                    <ul class="pagination">
                        <li>
                            <button class="btn btn-warning" id="first">首页</button>
                        </li>
                        <li>
                            <button class="btn btn-success" id="prev">上一页</button>
                        </li>
                        <li th:each="p:${page.navigatepageNums}">
                            <button class="btn btn-group-sm" name="pn" th:text="${p}" th:disabled="(${p} == ${page.pageNum})"></button>
                        </li>
                        <li>
                            <button class="btn btn-success" id="next">下一页</button>
                        </li>
                        <li>
                            <button class="btn btn-warning" id="last">尾页</button>
                        </li>
                        <span style="font-size: 20px;margin-left: 5px;" th:text="|共${page.total}条记录 共${page.pages}页  每页行数|"></span>
                        <select id="setRows">
                            <option id="setRows5" value="5" th:selected="5 == ${page.pageSize}">5</option>
                            <option id="setRows10" value="10" th:selected="10 == ${page.pageSize}">10</option>
                            <option id="setRows20" value="20" th:selected="20 == ${page.pageSize}">20</option>
                            <option id="setRows30" value="30" th:selected="30 == ${page.pageSize}">30</option>
                        </select>

                    </ul>
                </div>
					<!-- TODO 分页JS -->
                <script>
                    $(function () {
                        //初始化变量
                        let pageNum = [[${page.pageNum}]] //当前页
                        let pageCount = [[${page.pages}]] //最后页
                        let hasPreviousPage = [[${page.hasPreviousPage}]] //还有上一页
                        let hasNextPage = [[${page.hasNextPage}]] //还有下一页

                        $("#prev").click(function () {
                            $("#pageNum").val(pageNum - 1);
                            $("#qf").submit();
                        });


                        $("#next").click(function () {
                            $("#pageNum").val(pageNum + 1);
                            $("#qf").submit();
                        });

                        $("#first").click(function () {
                            $("#pageNum").val(1);
                            $("#qf").submit();
                        });

                        $("#last").click(function () {
                            $("#pageNum").val(pageCount);
                            $("#qf").submit();
                        });

                        //没有上一页
                        if (!hasPreviousPage) {
                            $("#prev").prop("disabled", true);
                            $("#first").prop("disabled", true);
                        }

                        //没有下一页
                        if (!hasNextPage) {
                            $("#next").prop("disabled", true);
                            $("#last").prop("disabled", true);
                        }

                        $("button[name='pn']").click(function () {
                            $("#pageNum").val($(this).html());
                            $("#qf").submit();
                        });


                    });

                    //实现可选择展示行的数目
                    $("#setRows5").click(function (){
                        let pageSize = $("select > option:selected").val();
                        $("#pageSize").val(pageSize);
                    })

                    $("#setRows10").click(function (){
                        let pageSize = $("select > option:selected").val();
                        $("#pageSize").val(pageSize);
                    })

                    $("#setRows20").click(function (){
                        let pageSize = $("select > option:selected").val();
                        $("#pageSize").val(pageSize);
                    })

                    $("#setRows30").click(function (){
                        let pageSize = $("select > option:selected").val();
                        $("#pageSize").val(pageSize);
                    })

                </script>

            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->

</div><!-- /.main-container -->

</body>
</html>

<script>

    //快速选中
    $(function (){
        $("#checkall").click(function (){
            //是否选中全选，flag true|false
            let flag = $(this).prop("checked");
            let oneList = $("input[name='check']");
            for(let i=0;i<oneList.length;i++){
                $(oneList[i]).prop("checked",flag);
            }
        });

        $("input[name='check']").click(function (){
            let oneList = $("input[name='check']");
            for(let i=0;i<oneList.length;i++){
                if(!$(oneList[i]).prop("checked")){
                    $("#checkall").prop("checked",false);
                    return;
                }
            }
            $("#checkall").prop("checked",true);
        });
    });

    //删除一个
    function delOne(sid){

        if(confirm("确认删除?")){
            $.post("delete/"+sid,null,function (date){
                if (date === 0){
                    //删除失败的数据做个提示
                    alert(sid+"删除失败！");
                }
            })
            //重新加载页面
            window.location.reload();
        }

    }

    //删除多个
    function delAll(){
        let alls=document.getElementsByName("check");
        let ids=new Array();
        alls.forEach(function(one,index){
            if (one.checked){
                //将被选中的条目获取其id值，然后放到数组ids中
                ids.push(one.value);
            }
        })

        if(ids.length>0){

            if(confirm("确认删除?")){
                //遍历数组，调取删除方法，循环删除数据
                ids.forEach(function (sid,index){

                    $.post("delete/"+sid,null,function (date){
                        if (date === 0){
                            //删除失败的数据做个提示
                            alert(sid+"删除失败！");
                        }
                    })
                })
                //重新加载页面
                window.location.reload();
            }
        }else{
            alert("请选中要删除的项");
        }
    }

</script>
